<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时聊天平台</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="loading-container" class="container">
        <div class="loading-spinner"></div>
        <p>正在加载...</p>
    </div>
    
    <div id="login-container" class="container hidden">
        <div id="login-form">
            <h2>登录聊天</h2>
            <input type="text" id="username" placeholder="输入用户名">
            <input type="password" id="password" placeholder="输入密码">
            <button id="login-btn">登录</button>
            <button id="show-register-btn" class="secondary-button">注册新用户</button>
        </div>

        <div id="register-form" class="hidden">
            <h2>注册新用户</h2>
            <input type="text" id="reg-username" placeholder="输入用户名">
            <input type="password" id="reg-password" placeholder="输入密码">
            <input type="password" id="reg-confirm-password" placeholder="确认密码">
            <button id="register-btn">注册</button>
            <button id="show-login-btn" class="secondary-button">返回登录</button>
        </div>
    </div>

    <div id="chat-container" class="container hidden">
        <div class="sidebar">
            <div class="user-info">
                <span id="current-user"></span>
                <select id="status-select" onchange="updateStatus(this.value)">
                    <option value="online">在线</option>
                    <option value="away">离开</option>
                    <option value="offline">离线</option>
                </select>
            </div>
            <div class="online-users">
                <h3>在线用户</h3>
                <ul id="users-list"></ul>
            </div>
        </div>
        
        <div class="chat-area">
            <div class="chat-header">
                <h2>聊天室</h2>
                <span id="unread-count" class="badge hidden">0</span>
            </div>
            <div id="messages" class="messages"></div>
            <div class="input-area">
                <input type="text" id="message-input" placeholder="输入消息...">
                <input type="file" id="file-input" style="display: none;">
                <button onclick="document.getElementById('file-input').click()" class="file-button">
                    <span class="file-icon">📎</span>
                </button>
                <button onclick="sendMessage()">发送</button>
            </div>
        </div>

        <div class="private-chat hidden" id="private-chat">
            <div class="chat-header">
                <h3>私聊: <span id="private-chat-user"></span></h3>
                <button onclick="closePrivateChat()">关闭</button>
            </div>
            <div id="private-messages" class="messages"></div>
            <div class="input-area">
                <input type="text" id="private-message-input" placeholder="输入私聊消息...">
                <input type="file" id="private-file-input" style="display: none;">
                <button onclick="document.getElementById('private-file-input').click()" class="file-button">
                    <span class="file-icon">📎</span>
                </button>
                <button onclick="sendPrivateMessage()">发送</button>
            </div>
        </div>
    </div>

    <script src="lib/socket.io.min.js"></script>
    <script src="app.js"></script>
</body>
</html> 